<template>
  <div class="test1">
    <el-row style="margin-bottom:15px">
      <el-col :span="3">
        <el-input placeholder="请输入订单编号" v-model="tid">订单</el-input>
      </el-col>
      <el-col :span="2" style="margin-left:10px">
        <el-button type="primary" @click="getOrderList">查询</el-button>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="open">购物车列表 {{gridData.length}}</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          @selection-change="selectionChange"
          ref="singleTable"
        >
          <el-table-column type="selection" align="center"></el-table-column>
          <el-table-column prop="tid" label="订单编号" align="center"></el-table-column>
          <el-table-column prop="refundStatus" label="状态" align="center"></el-table-column>
          <el-table-column prop="payment" label="价格" align="center"></el-table-column>
          <el-table-column prop="invoiceKind" label="开票类型" align="center"></el-table-column>
          <el-table-column prop="invoiceStatus" label="开票状态" align="center"></el-table-column>
          <el-table-column prop="invoiceType" label="发票类型" align="center"></el-table-column>
          <el-table-column prop="billStatus" label="货款状态" align="center"></el-table-column>
        </el-table>
      </el-col>
      <el-row>
        <el-col :span="24">
          <el-pagination
            class="paging"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalsum"
          ></el-pagination>
        </el-col>
      </el-row>
    </el-row>
    <div>
      <el-dialog :visible.sync="dialogTableVisible" width="60%" v-dialogDrag>
        <div slot="title">购物车列表：共{{gridData.length}}件</div>
        <el-table :data="gridData" max-height="500px">
          <el-table-column prop="tid" label="订单编号" align="center" width="200"></el-table-column>
          <el-table-column prop="refundStatus" label="状态" align="center"></el-table-column>
          <el-table-column prop="payment" label="价格" align="center"></el-table-column>
          <el-table-column prop="invoiceKind" label="开票类型" align="center"></el-table-column>
          <el-table-column prop="invoiceStatus" label="开票状态" align="center"></el-table-column>
          <el-table-column prop="invoiceType" label="发票类型" align="center"></el-table-column>
          <el-table-column prop="billStatus" label="货款状态" align="center"></el-table-column>
          <el-table-column prop label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="deselected(scope.$index, gridData)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogTableVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      currentPage: 1,
      tableData: [],
      pageSizes: [20, 50, 100],
      pageSize: 20,
      totalsum: 1,
      tid: "",
      dialogTableVisible: false,
      gridData: []
    };
  },
  methods: {
    selectionChange(val) {
      this.gridData = val;
    },

    open() {
      this.dialogTableVisible = true;
    },

    handleSizeChange(size) {
      let tmpSize = this.pageSize;
      if (tmpSize > this.totalpro && size > this.totalpro) {
        this.pageSize = size;
        return;
      }
      this.pageSize = size;
      this.getOrderList();
    },

    handleCurrentChange(page) {
      this.currentPage = page;
      this.getOrderList();
    },
    getOrderList() {
      let data = {
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        queryParams: {
          tid: this.tid,
          status: "",
          billStatus: "",
          invoiceStatus: ""
        },
        codeId: "C00100"
      };
      this.$axios.post("/erp/invoke", data).then(res => {
        this.tableData = res.data.data.orders;
        this.totalsum = res.data.data.totalRecord;
      });
    },
    deselected(index, item) {
      const deleteMember = this.gridData.splice(index, 1)[0];
      const ind = this.findIndex(this.tableData, deleteMember);
      ind !== -1
        ? this.$refs.singleTable.toggleRowSelection(this.tableData[ind], false)
        : "";
    },
    findIndex(list, obj) {
      var objStr = JSON.stringify(obj);
      return list.reduce((index, ele, i) => {
        if (JSON.stringify(ele) === objStr) {
          return i;
        } else {
          return index;
        }
      }, -1);
    }
  },
  mounted() {
    this.getOrderList();
  }
};
</script>
<style  scoped>
.paging {
  position: fixed;
  bottom: 0;
  z-index: 999;
  width: 97.4%;
  background-color: #e6eef8;
  border-left: 1px solid #d1d1d1;
  border-right: 1px solid #d1d1d1;
  border-bottom: 1px solid #d1d1d1;
}
.test1 {
  border: 1px solid transparent;
  padding-bottom: 30px;
}
</style>